<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>


<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <base href="<%=basePath%>">
    
    <title>policeStatistics</title>
	<jsp:include page="../analysisInclude.jsp"></jsp:include>


</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div class="container-fluid">
      <div class="row">
        <div class="col-xs-12">
            <div>
              <ul class="nav nav-tabs" role="tablist">
                <li id="dateLi" role="presentation" class="active" style="width: 33.333%;"><a id="aDate" href="#date" aria-controls="date" role="tab" data-toggle="tab">每日</a></li>
                <li id="monthLi" role="presentation" style="width: 33.333%;"><a id="aMonth" href="#month" aria-controls="month" role="tab" data-toggle="tab">每月</a></li>
                <li id="yearLi" role="presentation" style="width: 33.333%;"><a id="aYear" href="#year" aria-controls="year" role="tab" data-toggle="tab">每年</a></li>
              </ul>
              <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="date">
                    <div id="dateLineContainer" style="width: 1000px;height:700px;"></div>
                </div>
                <div role="tabpanel" class="tab-pane" id="month">
                    <div id="monthLineContainer" style="width: 1000px;height:700px;">month</div>
                </div>
                <div role="tabpanel" class="tab-pane" id="year">
                    <div id="yearLineContainer" style="width: 1000px;height:700px;">year</div>
                </div>
              </div>
               <div id="barContainer" style="width: 1000px;height:700px;margin-top: 30px;"></div>
            </div>
        </div>
      </div>
    </div>



    <script type="text/javascript">
    var path = "<%=path%>";
    var myChartLine = "";
    var myChartBar = "";
    var optionLine = "";
    var optionBar = "";
    var InitDate = "";

    
    $(function () {
        //默认初始化日数据
        InitDate = dateFormatter(new Date());
        $("#aDate").trigger("click");
    });
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
    function dateFormatter(value) {
        var date = new Date(value);
        var Y= date.getFullYear() + '-';
        var M = (date.getMonth()+ 1) < 10 ?'0'+ (date.getMonth()+1) + '-':(date.getMonth()+1)+'-';
        var D = date.getDate()< 10 ?'0' +  date.getDate(): date.getDate();
        return Y+M+D;
    }
    
    $("#aDate").on("click",function() {
        //console.log("11");
        initLineEchart("dateLineContainer",path+"/resource/jsonData/datePoliceData.json");
        initBarEchart("2017-09-25",path+"/resource/jsonData/datePoliceData.json");
    }); 

    $("#aMonth").on("click",function() {
        //console.log("11");
        initLineEchart("monthLineContainer",path+"/resource/jsonData/monthPoliceData.json");
        initBarEchart("201701",path+"/resource/jsonData/monthPoliceData.json");
    }); 

    $("#aYear").on("click",function() {
        //console.log("11");
        initLineEchart("yearLineContainer",path+"/resource/jsonData/yearPoliceData.json");
        initBarEchart("2016",path+"/resource/jsonData/yearPoliceData.json");
    }); 

    /*************************初始化 line echart**************************/
    function initLineEchart(divContainer,jsonData) {

        myChartLine = echarts.init(document.getElementById(divContainer));
        optionLine = null;

        optionLine = {
            color: [
                  "#736773",
                  "#a9a9ab",
                  "#e1816b",
                  "#e9c759"
            ],
            grid:{
                top:150
            },
            title: {
                text: '报警统计',
                textStyle: {
                	fontSize: '28'
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data:['机房报警次数','电梯报警次数','停车场报警次数','门禁报警次数'],
                top:'40',
                textStyle: {
                	fontSize: '18'
                }
            },
            dataZoom: [{
                 type: 'inside',
                 realtime: true,
                 start: 50,
                 end: 100
             }],
            calculable: true,
            xAxis: {
                type: 'category',//boundaryGap: false,//取消左侧的间距
                data: [],
                axisLabel: {        
                    textStyle: {
                        fontSize:'20'
                    }
                }
            },
            yAxis: {
            	name : '(次)',
            	nameTextStyle: {
            		fontSize:16
            	},
                type: 'value',
                axisLabel: {
                    textStyle: {
                        fontSize:'20'
                    },
                    formatter: '{value} '
                }
            },
            series: [{
                name:'机房报警次数',
                type:'bar',
                stack: 'one',
                data: []
            },{
                name:'电梯报警次数',
                type:'bar',
                stack: 'one',
                data: []
            },{
                name:'停车场报警次数',
                type:'bar',
                stack: 'one',
                data: []
            },{
                name:'门禁报警次数',
                type:'bar',
                stack: 'one',
                data: []
            }]
        };

        //数据加载完之前先显示一段简单的loading动画
        myChartLine.showLoading();  
        setTimeout(setLineData(jsonData) ,500);
        
/*         function eConsole(param) {    
            if (typeof param.seriesIndex == 'undefined') {    
                    return;    
                }    
                if (param.type == 'click') {    
                    alert(param.name);    
                }    
            }     */
        
        myChartLine.on('click', function (params) {
            //console.log(params.name);//获取对应日期
            initBarEchart(params.name,jsonData);
        });  

    }

    /*************************end line echart**************************/

    /*************************初始化 line data**************************/
    function setLineData(jsonData) {
        //声明数据数组
        var categoriesArrary = new Array();
        var dataArrary1 = new Array();
        var dataArrary2 = new Array();
        var dataArrary3 = new Array();
        var dataArrary4 = new Array();

        // 异步加载数据
        $.get(jsonData).done(function (data) {
            //var bToObj=JSON.parse(data); //json字符串转json数组
            $.each(data.jfbj,function(index,item){
                //console.log(item);
                categoriesArrary.push(item.categories);//循环取出类别并填入类别数组
                dataArrary1.push(item.data);//循环取出数据并填入类别数组
            });

            $.each(data.dtbj,function(index,item){
                dataArrary2.push(item.data);
            });

            $.each(data.tccbj,function(index,item){
                dataArrary3.push(item.data);
            });

            $.each(data.mjbj,function(index,item){
                dataArrary4.push(item.data);
            });

            //console.log(categoriesArrary);
            myChartLine.hideLoading(); //隐藏加载动画
            myChartLine.setOption({//加载数据图表
                xAxis: {
                    data: categoriesArrary
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '机房报警次数',
                    data: dataArrary1
                },
                {
                    // 根据名字对应到相应的系列
                    name: '电梯报警次数',
                    data: dataArrary2
                },
                {
                    // 根据名字对应到相应的系列
                    name: '停车场报警次数',
                    data: dataArrary3
                },
                {
                    // 根据名字对应到相应的系列
                    name: '门禁报警次数',
                    data: dataArrary4
                }]
            });
        });

        if (optionLine && typeof optionLine === "object") {
            myChartLine.setOption(optionLine, true);
        }
    }

    /*************************end line data**************************/

    /*************************初始化 bar echart**************************/    
    function initBarEchart(date,jsonData) { 

    	myChartBar = echarts.init(document.getElementById("barContainer"));
        optionBar = null;

        optionBar = {	
         color: [
                 "#736773",
                 "#a9a9ab",
                 "#e1816b",
                 "#e9c759" 
          ],
        grid:{
            top:150
        },
        title : {
            text: '报警占比',
            x:'left',
            textStyle: {
            	fontSize: '28'
            },
            subtextStyle: {
            	fontSize: '20'
            }
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            x: 'center',
            top:'80',
            textStyle: {
            	fontSize: '18'
            },
            data:[]
        },
        calculable : true,
        series : [
            {
                name:'设备统计',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                label:{
                    normal:{
                         formatter: "{b} : {c}次",
                         textStyle: {
                             fontSize: '18',
                             fontWeight: 'bold'
                         }
                    }
                },
                data:[]
            }
        ]
    };

        //数据加载完之前先显示一段简单的loading动画
        myChartBar.showLoading();  
        setTimeout(setBarData(date,jsonData) ,500);

    }

    function setBarData(date,jsonData) {
        //声明数据数组
        var jsonDataArrary = new Array();
        var jsonNameArrary = new Array();
        var zsCount = 0;
        // 异步加载数据
        $.get(jsonData).done(function (data) {

            $.each(data.jfbj,function(index,item){
                var obj = "";
                if((item.categories) == date && (item.data!=0)){
                    zsCount += item.data;
                	obj = {"name":"机房报警次数","value":item.data};
                    jsonNameArrary.push("机房报警次数");
                    jsonDataArrary.push(obj);
                }
            });
            
            $.each(data.dtbj,function(index,item){
                var obj = "";
                if((item.categories) == date && (item.data!=0)){
                    zsCount += item.data;
                	obj = {"name":"电梯报警次数","value":item.data};
                    jsonNameArrary.push("电梯报警次数");
                    jsonDataArrary.push(obj);
                }
            });
            
            $.each(data.tccbj,function(index,item){
                var obj = "";
                if((item.categories) == date && (item.data!=0)){
                    zsCount += item.data;
                	obj = {"name":"停车场报警次数","value":item.data};
                    jsonNameArrary.push("停车场报警次数");
                    jsonDataArrary.push(obj);
                }
            });
            
            $.each(data.mjbj,function(index,item){
                var obj = "";
                if((item.categories) == date && (item.data!=0)){
                    zsCount += item.data;
                	obj = {"name":"门禁报警次数","value":item.data};
                    jsonNameArrary.push("门禁报警次数");
                    jsonDataArrary.push(obj);
                }
            });

            myChartBar.hideLoading(); //隐藏加载动画
            myChartBar.setOption({
                title: {
                    subtext: date,
                },
                legend: {
                    data: jsonNameArrary
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '报警统计',
                    data: jsonDataArrary
                }]
            });
        });

        if (optionBar && typeof optionBar === "object") {
            myChartBar.setOption(optionBar, true);
        }
    }


    /*************************end bar data**************************/
    </script>
   </body>
</html>